<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>水波纹加载效果</title>
  </head>
  <style>
	  .app{
	    width: 100%;
	    height: 100vh;
	    background-color: #ffffff;
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .waterbox53{
	    width: 100px;
	    height: 100px;
	    border: 1px solid white;
	    box-shadow: 0 0 0 2px blue;
	    border-radius: 50%;
	    overflow: hidden;
	    position: relative;
	  }
	  .loadwave53{
	    width: 100%;
	    height: 100%;
	    border-radius: 50%;
	    background: blue;
	  }
	  
	  .loadwave53:before,.loadwave53:after{
	    content: '';
	    width: 200px;
	    height: 200px;
	    left: -50px;
	    position: absolute;
	    z-index: 5;
	  }
	  
	  .loadwave53:before{
	    border-radius: 44%;
	    background: #ffffff;
	    animation: rotatewaveeff53 6s linear infinite,loadwaveeff53 10s linear infinite;
	  }
	  
	  .loadwave53:after{
	    border-radius: 38%;
	    background: rgb(255,255,255,0.5);
	    animation: rotatewaveeff53 8s linear infinite,loadwaveeff53 10s linear infinite;
	  }
	  
	  @keyframes rotatewaveeff53{
	    0% {
	      transform: rotate(0deg);
	    }
	  
	    100% {
	      transform: rotate(360deg);
	    }
	  }
	  @keyframes loadwaveeff53{
	    0% {
	      top: -100px;
	    }
	    100% {
	      top: -210px;
	    }
	  }
  </style>
  <body>
    <div class="app">
      <div class="waterbox53">
        <div class="loadwave53"></div>
      </div>
    </div>
  </body>
</html>